<%@ page contentType="text/html;charset=UTF-8" language="java"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
<html lang="zh-cn">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>管理员列表</title>
<jsp:include page="../common/common.jsp" />
<style>
.searchs {
	padding-top: 20px;
}

.w-45p {
	width: 45% !important;
}

.w-10p {
	width: 10% !important;
	text-align: center;
	line-height: 34px;
}

.w-50 {
	width: 60px !important;
}

table {
	font-size: small;
}

th {
	font-size: small;
}
</style>
</head>
<body>
	<div id="main">
		<div class="searchs">
			<form method="post" class="form-horizontal searchsForm">
				<div class="col-lg-4 col-md-4 form-group">
					<label class="col-lg-3 col-md-3 control-label">登录名</label>
					<div class="col-lg-8 col-md-8">
						<input type="text" class="form-control" name="loginName" id="loginName" />
					</div>
				</div>

				<div class="col-lg-4 col-md-4 form-group">
					<label class="col-lg-4 col-md-4 control-label">角色中文名</label>
					<div class="col-lg-8 col-md-8">
						<select class="form-control" id="roleId" name="roleId">
						</select>
					</div>
				</div>
				
				<div class="col-lg-4 col-md-4 form-group">
	                <label class="col-lg-3 col-md-3 control-label">用户状态</label>
	                <div class="col-lg-8 col-md-8">
						<select class="form-control" id="status" name="status">
							<option value="">---请选择---</option>
							<option value="1">可用</option>
							<option value="2">已冻结</option>
						</select>
					</div>
	            </div>

				<div class="form-group">
					<div class="col-lg-3 col-md-3 col-lg-offset-9 col-md-offset-9">
						<button id="search" type="button" class="btn btn-primary w-50 fr" style="margin-left: 10px; margin-right: 10px;">搜索</button>
						<input type="reset" class="btn btn-primary w-50 fr btn-reset" value="重置">
					</div>
				</div>
			</form>
		</div>
		<div id="toolbar">
			<a class="waves-effect waves-button" href="${webroot}/admin/page/system/userAdd"><i class="glyphicon glyphicon-plus"></i> 新增管理员</a>
			<a class="waves-effect waves-button" href="javascript:;" onclick="updateAction('freeze')"><i class="zmdi zmdi-lock" style="font-size: 18px;"></i> 冻结管理员</a>
			<a class="waves-effect waves-button" href="javascript:;" onclick="updateAction('unfreeze')"><i class="zmdi zmdi-lock-open" style="font-size: 18px;"></i> 解冻管理员</a>
		</div>
		<table id="table"></table>
	</div>

<script>
//初始化角色下拉框数据
getSysRoleDictData("roleId");
var $table = $('#table');
var userListDataUrl = webroot + '/admin/system/queryListUserData';
$(function() {
	$(document).on('focus', 'input[type="text"]', function() {
		$(this).parent().find('label').addClass('active');
	}).on('blur', 'input[type="text"]', function() {
		if ($(this).val() == '') {
			$(this).parent().find('label').removeClass('active');
		}
	});
	$table.bootstrapTable({
		url : userListDataUrl + '?date=' + new Date(),
		method: "post",
        contentType:"application/x-www-form-urlencoded",
		height : getHeight(),
		striped : true,
		minimumCountColumns : 2,
		clickToSelect : true,
		pagination : true,
		paginationLoop : false,
		pageList : [ 10, 20, 30, 40, 50 ],
		classes : 'table table-hover table-no-bordered',
		// 服务端分页
		sidePagination : 'server',
		//silentSort: false,
		//默认值为 'limit',传给服务端的参数为：limit, offset, search, sort, order Else
		//queryParamsType:'',
		//查询参数（重写参数）,每次调用是会带上这个参数，可自定义  
		//其中 params表示 分页， params.offset, 页码: params.limit 页面大小
		queryParams : function(params) {
			var roleId = $('#roleId option:selected')
					.val();
			var loginName = $('#loginName').val();
			return {//此处添加查询的分页条件
				pageNum : params.offset + 1 == 1 ? 1
						: ((params.offset - (params.limit)) / 10 + 2),
				numPerPage : params.limit,
				loginName : loginName,
				roleId : roleId
			};
		},
		smartDisplay : false,
		idField : 'id',
		//  sortName: 'id',
		// 关闭排序
		sortable : false,
		escape : true,
		idField : 'systemId',
		maintainSelected : true,
		toolbar : '#toolbar',
		columns : [
		// field： 对应数据字段
		// title： 标题内容
		// sortable： 是否开启排序
		// halign : 内容垂直居中
		//formatter : 通过formatter可以自定义列显示的内容
		//value：当前field的值，即id
		//row：当前行的数据
		{
			field : 'state',
			checkbox : true
		}, {
			field : 'id',
			title : '编号',
			sortable : true,
			align : 'center'
		}, {
			field : 'loginName',
			title : '登录名',
			sortable : true,
			align : 'center'
		}, {
			field : 'email',
			title : '邮箱',
			sortable : true,
			align : 'center'
		}, {
			field : 'zipCode',
			title : '邮编',
			sortable : true,
			align : 'center'
		}, {
			field : 'mobilePhone',
			title : '手机号',
			sortable : true,
			align : 'center'
		}, {
			field : 'telephone',
			title : '电话',
			sortable : true,
			align : 'center'
		}, {
			field : 'zhName',
			title : '角色',
			sortable : true,
			align : 'center'
		}, {
			field : 'createTime',
			title : '创建时间',
			sortable : true,
			align : 'center',
			formatter : 'getCreateTimeFormatterTime'
		}, {
			field : 'status',
			title : '状态',
			sortable : true,
			align : 'center',
			formatter : 'statusformatter'
		}, {
			field : 'action',
			title : '操作',
			halign : 'center',
			align : 'center',
			formatter : 'actionFormatter',
			events : 'actionEvents',
			clickToSelect : false
		} ]}).on('all.bs.table', function(e, name, args) {
			$('[data-toggle="tooltip"]').tooltip();
			$('[data-toggle="popover"]').popover();
		});
	});

//条件查询 使用refresh来更新tableb表格
$('#search').click(function() {
	$table.bootstrapTable('refresh', {url : userListDataUrl });
});

//格式化 状态
function statusformatter(value, row, index) {
	if (value != null) {
		if (value == '1') {
			return '可用';
		} else if (value == '2') {
			return '已冻结';
		}
	} else {
		return '--';
	}
}
//格式化a标签
function actionFormatter(value, row, index) {
	return ['<a class="edit ml10" href="${webroot}/admin/page/system/userUpdate?userId='
			+ row.id + '" data-toggle="tooltip" title="编辑"><i class="glyphicon glyphicon-edit"></i></a>　',
			'<a class="ml10" href="${webroot}/admin/page/system/userPasswordUpdate?userId='
			+ row.id + '&loginName='+row.loginName+'" data-toggle="tooltip" title="修改密码" style="color:red">修改密码</a>　'
		   ].join('');
}
// 冻结
function updateAction(operate) {
	// 	返回所选的行，当没有选择任何行的时候返回一个空数组
	var rows = $table.bootstrapTable('getSelections');
	if (rows.length == 0) {
		$.confirm({
			title : false,
			content : '请至少选择一条记录！',
			autoClose : 'cancel|3000',
			backgroundDismiss : true,
			buttons : {
				cancel : {
					text : '取消',
					btnClass : 'waves-effect waves-button'
				}
			}
		});
	} else {
        $.confirm({
			type : 'green',
			animationSpeed : 300,
			title : operate == 'freeze' ? ('是否冻结这' + (rows.length == 1 ? '个管理员'
					: (rows.length + '个管理员')))
					: ('是否解冻这' + (rows.length == 1 ? '个管理员' : (rows.length + '个管理员'))),
			buttons : {
				confirm : {
					text : '确认',
					btnClass : 'waves-effect waves-button',
					action : function() {
						// 编辑确定，执行数据操作
						var ids = new Array();
						for (var i = 0; i < rows.length; i++) {
							if (rows[i].id == 1) {
								$.alert('无法对超级管理员进行该操作！');
								return;
							}
							if (operate == 'freeze') {
								if (rows[i].status == 2) {
									continue;
								} else {
									ids.push(rows[i].id)
								}
							} else if (operate == 'unfreeze') {
								if (rows[i].status == 1) {
									continue;
								} else {
									ids.push(rows[i].id)
								}
							}
						}
						if (ids.length == 0) {
							$.alert('操作成功！');
							$table.bootstrapTable('refresh',{url : userListDataUrl});
						} else {
							$.ajax({
								url : webroot + '/admin/system/updateSysUserStatus',
								data : {
									ids : ids,
									updateType : operate
								},
								dataType : "json",
								type : 'POST',
								success : function(data) {
									checkResponseData(data, "1", webroot + "/admin/page/system/userList");
								},
								error : function() {
									$.alert("请求冻结/解冻/删除管理员接口失败，请检查！");
								}
							});
						}
					}
				},
				cancel : {
					text : '取消',
					btnClass : 'waves-effect waves-button',
					action : function() {
						
					}
				}
			}
		});
	}
}
</script>
</body>
</html>
